<template>
    <div>
        <el-card class="listItem" shadow="hover">
            <div class="box">
                <el-avatar icon="el-icon-user-solid"></el-avatar>
                <div class="div1">
                    <p>
                        <span>{{ commentInfo.userInfo.username }}</span>
                        <span>{{ commentInfo.createTime }}</span>
                    </p>
                    <div style="display: flex; justify-content: space-between">
                        <div style="font-size: 16px;">
                            {{ commentInfo.content }}
                        </div>
                        <el-popconfirm title="确定要删除此评论吗？" @confirm="remove">
                            <el-button slot="reference" class="delete" type="text" icon="el-icon-delete" v-if="userInfo.admin"></el-button>
                        </el-popconfirm>
                    </div>
                    
                </div>
            </div>
            <div class="btn">
                <el-link class="thumbs" icon="iconfont icon-zan" @click="giveThumbs" v-show="!thumbs">赞({{ thumbsNumber }})</el-link>
                <el-link class="thumbs" icon="iconfont icon-zan" @click="cancelThumbs" v-show="thumbs" style="color: #409EFF">已赞({{ thumbsNumber }})</el-link>
                <el-divider direction="vertical"></el-divider>
                <el-link icon="el-icon-chat-dot-square">回复({{ responseNumber }})</el-link>
            </div>
        </el-card>
    </div>
</template>

<script>
import commentApi from '@/views/api/comment/comment'
import thumbsApi from '@/views/api/comment/thumbs'
import { mapGetters } from 'vuex'

export default {
    data() {
        return {
            success: false,
            thumbs: false,
            thumbsNumber: undefined,
            responseNumber: undefined,
            thumbsCommentId: undefined,
        }
    },
    props: {
        commentInfo: Object,
        thumbsArray: Array,
    },
    computed: {
        ...mapGetters(['userInfo'])
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            let obj = this.thumbsArray.find(item => item.commentId === this.commentInfo.id)
            if (obj) {
                this.thumbs = true
                this.thumbsCommentId = obj.id
                console.log(this.thumbsCommentId)
            } else {
                this.thumbs = false
            }
            this.thumbsNumber = this.commentInfo.thumbsNumber
            this.responseNumber = this.commentInfo.responseNumber
        },
        remove() {
            commentApi.remove(this.commentInfo.id).then(() => {
                this.$message({
                    message: '评论删除成功',
                    type: 'success'
                })
                this.success = true
            }).catch(() => [
                this.$message({
                    message: '评论删除失败',
                    type: 'error'
                }),
            ]).then(() => {
                this.$emit('remove', this.success)
            })
        },
        giveThumbs() {
            const data = {
                userId: this.userInfo.id,
                commentId: this.commentInfo.id
            }
            thumbsApi.giveThumbs(data).then(() => {
                this.$message.success('点赞成功')
                this.thumbsNumber++
                this.thumbs = true
            })
        },
        cancelThumbs() {
            console.log(this.thumbsCommentId)
            thumbsApi.cancel(this.thumbsCommentId).then(() => {
                this.$message.success('取消成功')
                this.thumbsNumber--
                this.thumbs = false
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.listItem {
    margin-top: 10px;
    ::v-deep .el-card__body {
        padding: 0;
    }
    ::v-deep .box {
        padding: 20px;
        display: flex;
        .el-avatar {
            flex-shrink: 0;
        }
        p {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
            :nth-child(1) {
                font-size: 14px;
                color: #fc7123;
            }
            :nth-child(2) {
                font-size: 12px;
                color: #aaa;
            }
        }
        .div1 {
            width: 100%;
            margin-left: 18px;
        }
    }
}
.el-button {
    visibility: hidden;
}
.listItem:hover {
    .el-button {
        visibility: visible;
    }
}
.delete {
    padding: 0
}
.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #DCDFE6
}
.el-link {
    display: inline-block;
    width: 100%;
    text-align: center;
    line-height: 40px;
}
.el-divider {
    height: 30px;
}
</style>
